<template>
  <div class="mainPage">
    <div class="box">
      <content-title>订单状态</content-title>
      <div class="f-sa-c">
        <el-tooltip
          effect="dark"
          :content="opt.produce"
          placement="top"
          class="f-c-c-c"
          v-for="(opt, ind) in opts2"
          :key="ind"
        >
          <div class="part">
            <span>{{ opt.text }}</span>
            <b>{{ opt.amount }}</b>
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="box">
      <content-title>营收状况</content-title>
      <div class="f-fs-c">
        <el-radio-group v-model="radio1" size="small">
          <el-radio-button label="前天"></el-radio-button>
          <el-radio-button label="昨天"></el-radio-button>
          <el-radio-button label="今天"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="f-sa-c">
        <el-tooltip
          effect="dark"
          :content="opt.produce"
          placement="top"
          class="part f-c-c-c"
          v-for="(opt, ind) in opts1"
          :key="ind"
        >
          <div class="part">
            <span>{{ opt.text }}</span>
            <b>{{ opt.amount }}</b>
          </div>
        </el-tooltip>
      </div>
    </div>
    <div class="box">
      <content-title>经营走势</content-title>
      <div class="f-fs-c">
        <el-radio-group v-model="radio2" size="small">
          <el-radio-button label="一周内"></el-radio-button>
          <el-radio-button label="半月内"></el-radio-button>
          <el-radio-button label="一月内"></el-radio-button>
        </el-radio-group>
      </div>
      <div class="f-fs-c">
        <echarts
          id="visitor"
          :options="visitorOpts"
          :cssText="cssText"
          :theme="'dark'"
        ></echarts>
        <echarts id="sell" :options="$baseOpts" :cssText="cssText"></echarts>
        <echarts id="volumn" :options="volumnOpts" :cssText="cssText"></echarts>
      </div>
    </div>
  </div>
</template>
<script>
import Echarts from "../base/Echarts.vue";
export default {
  components: { Echarts},
  name: "mainPage",
  data() {
    return {
      radio1: "今天",
      radio2: "一周内",
      cssText: {
        width: "450px",
        height: "350px",
        minWidth: "400px",
        background: "#fff8f4",
      },
      opts1: [
        {
          text: "访客数",
          amount: 10,
          produce: "到访网站的人数",
        },
        {
          text: "浏览量",
          amount: 10,
          produce: "浏览商品的总量",
        },
        {
          text: "下单笔数",
          amount: 10,
          produce: "完成提交的订单数",
        },
        {
          text: "支付笔数",
          amount: 10,
          produce: "完成支付的订单数",
        },
        {
          text: "支付买家数",
          amount: 10,
          produce: "完成支付的买家数",
        },
        {
          text: "销售量",
          amount: 10,
          produce: "已成功售卖的手机部数",
        },
        {
          text: "成交额",
          amount: 10,
          produce: "商品成交总额",
        },
        {
          text: "成交转化率",
          amount: "62.5%",
          produce: "访客数转支付笔数的比率",
        },
      ],
      opts2: [
        {
          text: "待付款",
          amount: "20",
          produce: "提交订单但未付款的订单数",
        },
        {
          text: "待发货",
          amount: "10",
          produce: "完成支付但未发货的订单数",
        },
        {
          text: "待售后",
          amount: "20",
          produce: "待售后处理的订单数",
        },
        {
          text: "退款中",
          amount: "20",
          produce: "申请退款的订单数",
        },
        {
          text: "物流异常",
          amount: "20",
          produce: "物流异常的订单数",
        },
      ],
      visitorOpts: {
        title: {
          text: "访客数",
          textStyle: {
            color: "#ff5000",
          },
          top: 10,
          left: "center", //居中显示
        },
        grid: {
          left: 60,
          right: 55,
          top: 70,
          bottom: 40,
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          boundaryGap: false, //两侧是否留白
          name: "星期",
          axisTick: {
            inside: true, //控制刻度向内还是向外伸出
          },
          axisLabel: {
            margin: 12,
          },
          nameTextStyle: {
            fontSize: 15,
          },
           axisLine: {
            show: true,
            symbol: ["none","arrow"],
            symbolSize: [8,12],
            symbolOffset: 10
          },
        },
        yAxis: {
          type: "value",
          name: "金额(元)",
          max: 1600,
          min: 1000,
          nameTextStyle: {
            fontSize: 15,
          },
          axisLine: {
            show: true,
            symbol: ["none","arrow"],
            symbolSize: [8,12],
            symbolOffset: 10
          },
          axisTick:{
            show: true,
            inside: true
          },
          splitNumber: 10, //这只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
          splitLine: {
            // show: false,
            lineStyle: {
              type: "dashed",
            },
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            type: "line",
            data: [1500, 1230, 1224, 1218, 1135, 1147, 1260],
          },
        ],
        color: "#ff5000",
      },
      volumnOpts: {
        title: {
          text: "成交额",
          textStyle: {
            color: "#ff5000",
          },
          top: 10,
          left: "center", //居中显示
        },
        grid: {
          show: true,
          left: 60,
          right: 55,
          top: 70,
          bottom: 40,
        },
        xAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
          boundaryGap: false, //两侧是否留白
          name: "星期",
          axisTick: {
            inside: true, //控制刻度向内还是向外伸出
          },
          axisLabel: {
            margin: 12,
          },
          nameTextStyle: {
            fontSize: 15,
          },
        },
        yAxis: {
          type: "value",
          name: "金额(元)",
          interval: 50,
          max: 1600,
          min: 1000,
          nameTextStyle: {
            fontSize: 15,
          },
        },
        series: [
          {
            data: [1500, 1230, 1224, 1218, 1135, 1147, 1260],
            type: "line",
          },
        ],
      },
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.el-col {
  border-radius: 24px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.box {
  margin-bottom: 30px;
}
.el-radio-group {
  margin-bottom: 20px;
}
.part {
  span {
    line-height: 2;
    color: $color-text-secondary;
  }
  b {
    font-size: 26px;
  }
}
.echarts {
  &:not(:last-child) {
    margin-right: 30px;
  }
}
.others {
  border-radius: $border-radius-big;
  border: 1px solid $border-color-lighter;
}
</style>
